<template>
  <div class="home-page">
    <!-- 顶部标题 -->
    <header class="header">
      <div class="logo" @click="goHome">
        <img
          style="height: 56px; width: 188px"
          src="../../assets/2de0a0aed8c056d27f6076574092ce6.png"
          alt="logo"
        />
      </div>
      <div class="user-info">
        <span>{{ userInfo.name  }}，您好！</span>
        <el-link type="primary" @click="signOut">退出账号 ></el-link>
      </div>
    </header>
    <div class="back-page">
      <div class="content">
        <!-- 左侧公告栏 -->
        <div class="left-box gradient-box" style="padding: 0">
          <div
            class="box-headerr"
            style="
              padding: 16px;
              margin-bottom: 0px;
              background-color: #fff;
              position: relative;
            "
          >
            <span class="title">项目公告</span>
            <el-link class="more" href="search" type="primary">更多 >></el-link>
            <div
              style="
                background-color: #0170fe;
                height: 2px;
                width: 85px;
                position: absolute;
                left: 16px;
                bottom: 0;
              "
            ></div>
          </div>
          <div class="box-search">
            <div
              style="padding: 0 10px 15px; display: flex; align-items: center"
            >
              <img
                style="margin: 0px 10px"
                src="@/assets/search.png"
                alt=""
              />快速搜索想要的公告
            </div>
            <div class="box-header">
              <el-form @keydown.enter="searchHandle">
                <el-input v-model="searchInput" placeholder="请输入公告名称" />
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="发布起始时间"
                  end-placeholder="发布结束时间"
                />

                <el-button type="primary" @click="searchHandle">搜索</el-button>
                <el-button type="warning" @click="resetHandle">重置</el-button>
              </el-form>
            </div>
          </div>
          <div class="announcement-list" style="padding: 0px 16px">
            <ul>
              <li
                v-if="type != 'sp'"
                v-for="(item, index) in announcements"
                :key="index"
                @click="
                  lookProjectInfo('/projectNotice', item.id, item.noticeUrl)
                "
              >
                <span class="title">{{ item.name }}</span>
                <span class="date">{{ item.publishTime }}</span>
              </li>
              <li
                v-else
                v-for="(item, index) in announcements"
                @click="
                  lookProjectInfo('/projectNotice', item.id, item.noticeUrl)
                "
              >
                <span class="title">{{ item.name }}</span>
                <span class="date">{{ item.publishTime }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 右侧用户信息和帮助中心 -->
        <div class="right-box">
          <div class="company-info">
            <div class="company-logo">
              <h3 v-if="type == 'sp'">{{ userInfo.name }}</h3>
              <h3 v-else>
                {{ userInfo.name}}
                <img
                  class="enterprise"
                  src="@/assets/enterprise.png"
                  alt=""
                />
              </h3>
            </div>
            <div class="action-buttons" v-if="type == 'sp'">
              <div
                class="action-button"
                @click="
                  navigator(`/myProject?type=participate&id=${userInfo.id}`)
                "
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>我参与的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/myProject?type=select&id=${userInfo.id}`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>我中选的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/companyInfo?id=${userInfo.id}`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>企业信息设置</h3>
              </div>
            </div>

            <div class="action-buttons" v-else-if="type == 'judge_compere'">
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=participate`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>我主持评审的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=select`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>待主持评审的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeInfo?id=${userInfo.id}`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>个人账号设置</h3>
              </div>
            </div>
            <div class="action-buttons" v-else-if="type == 'judge_jury'">
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=participate`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>我评审的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=select`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>待评审的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeInfo?id=${userInfo.id}`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>个人账号设置</h3>
              </div>
            </div>
            <div class="action-buttons" v-else-if="type == 'judge_custodian'">
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=participate`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>我监督的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeProject?type=select`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>待监督的项目</h3>
              </div>
              <div
                class="action-button"
                @click="navigator(`/judgeInfo?id=${userInfo.id}`)"
              >
                <img src="../../assets/myProjectIcon.png" alt="icon" />
                <h3>个人账号设置</h3>
              </div>
            </div>
          </div>

          <div class="help-center gradient-box">
            <div class="box-headerr">
              <span class="title">帮助中心</span>
              <el-link class="more" href="help" type="primary">更多 >></el-link>
            </div>
            <ul>
              <li
                v-for="(help, index) in helpLinks"
                :key="index"
                @click="lookProjectInfo('/helpDetail', help.noticeId)"
              >
                <span class="help-title">{{ help.noticeTitle }}</span>
                <span class="help-date">{{ help.createTime }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { noticeList } from "@/api/helpNotice";
import { getProjectList } from "@/api/projectNotice";
const router = useRouter();
const searchInput = ref("");
const dateRange = ref([]);
const announcements = ref([]);
const helpLinks = ref([]);
const type = ref("");
const searchForm = ref({
  pageNum: 1,
  pageSize: 15,
  name: "",
  status: "project_status_announcement",
});

const userInfo = ref({ name: "", enterprise: "" });
const searchHandle = () => {
  searchForm.value.name = searchInput.value;
  searchForm.value.publishStartTime = moment(dateRange.value[0]).format(
    "YYYY-MM-DD"
  );
  searchForm.value.publishEndTime = moment(dateRange.value[1]).format(
    "YYYY-MM-DD"
  );
  getAnnouncements();
};
const resetHandle = () => {
  searchForm.value = { pageNum: 1, pageSize: 15, name: "" };
  searchInput.value = "";
  dateRange.value = [];
  getAnnouncements();
};
//获取项目公告
const getAnnouncements = () => {
  noticeList(searchForm.value).then((res) => {
    if (res.code == 200) {
      helpLinks.value = res.rows;
    }
  });
  getProjectList(searchForm.value).then((res) => {
    if (res.code == 200) {
      announcements.value = res.rows;
    }
  });
if(JSON.parse(localStorage.getItem("judgeInfo"))){
  userInfo.value=JSON.parse(localStorage.getItem("judgeInfo"))
}else if(JSON.parse(localStorage.getItem("supplierInfo"))){
  userInfo.value=JSON.parse(localStorage.getItem("supplierInfo"))
  userInfo.value.name=userInfo.value.enterprise
}else{
  navigator('/home')
}
};
const lookProjectInfo = (path, id, pdfUrl) => {
  let data = {};
  if (path == "/helpDetail") {
    data = {
      noticeId: id,
      type: "indexView",
    };
  } else {
    data = {
      id: id,
      type: "indexView",
      pdfUrl: pdfUrl,
    };
  }
  router.push({ path: path, query: data });
};
const navigator = (path) => {
  router.push(path);
};
const signOut = () => {
  window.location.replace("/");
  localStorage.clear();
};

const goHome = () => {
  router.push({
    path: "/index",
  });
};
onMounted(() => {
  if (localStorage.getItem("judgeInfo")) {
    type.value = JSON.parse(localStorage.getItem("judgeInfo")).type;
  } else if (localStorage.getItem("supplierInfo")) {
    type.value = "sp";
  }

  getAnnouncements();
});
</script>

<style scoped>
.back-page {
  height: calc(100vh - 56px);
  background: url("../../assets/back2.png") no-repeat center center;
  background-size: cover;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  /*border-bottom: 1px solid #eee;*/
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      height: 40px;
      margin-right: 8px;
    }
    span {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    span {
      margin-right: 16px;
    }
  }
}

.box-headerr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 8px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .more {
    font-size: 14px;
  }
}
.box-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f3faff;
  height: 100px;
  border-bottom: 1px solid #ebeef5;
}
.box-header {
  margin: 0 10px;
}
:deep(.box-header div) {
  width: 38%;
  margin: 0px 10px;
}
.content {
  display: flex;
  padding: 5px 10%;
  margin: auto;
  width: 100%;
  .left-box {
    flex: 3;
    margin-right: 16px;
    background: #fff;
    border-radius: 8px;
    padding: 16px 0px;
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
    .announcement-list ul {
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        .title {
          font-size: 14px;
          color: #333;
          cursor: pointer;
        }
        .title:hover,
        .date:hover {
          color: #0099ff;
        }
        .date {
          font-size: 12px;
          color: #888;
        }
      }
    }
  }

  .right-box {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .company-info {
      background: #fff;
      border-radius: 15px 15px 0 0;
      box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
      .company-logo {
        background: #0099ff;
        border-radius: 15px 15px 0 0;
        height: 65px;
        margin-top: -19px;
        h3 {
          line-height: 70px;
          margin-left: 10px;
          color: white;
          position: relative;
          .enterprise {
            width: 85px;
            height: 76px;
            position: absolute;
            right: 0px;
            bottom: -25px;
          }
        }
      }

      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;

        margin-top: 16px;
        .el-button {
          margin: 0;
        }
      }
    }
    .help-center {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      flex: 1;
      box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
      h3 {
        margin-bottom: 16px;
      }
      ul {
        list-style: none;
        padding: 0;
        li {
          display: flex;
          justify-content: space-between;
          padding: 8px 0;
          cursor: pointer;
          .help-title {
            font-size: 14px;
            color: #333;
          }
          .help-title:hover,
          .help-date:hover {
            color: #0099ff;
          }
          .help-date {
            font-size: 12px;
            color: #888;
          }
        }
      }
    }
  }
}
.action-button {
  display: flex;
  align-items: center;
  height: 75px;
  padding: 0 5px;
  background: linear-gradient(to right, #c6daff, #c6e1fe, #c7ebfe);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
  border-radius: 8px;
  cursor: pointer;
  img {
    height: 55px;
    margin-right: 10px;
  }
  h3:hover {
    color: #0099ff;
  }
}
</style>
